import React from "react";
export type SizeType = "small" | "middle" | "large" | number | undefined;
export interface SpaceProps extends React.HTMLAttributes<HTMLDivElement> {
  className?: string;
  style?: React.CSSProperties;
  size?: SizeType | [SizeType, SizeType];
  direction?: "horizontal" | "vertical";
  align?: "start" | "end" | "center" | "baseline";
  split?: React.ReactNode;
  wrap?: boolean;
}
const SpaceApp = (props: SpaceProps) => {
  const { className, style, ...rest } = props;
  const childNodes = React.Children.toArray(props.children);
  const nodes = childNodes.map((child: any, i) => {
    const key = (child && child.key) || `space-item-${i}`;
    return (
      <div className="space-item" key={key}>
        {child}
      </div>
    );
  });
  return (
    <div {...rest} className={className} style={style}>
      {nodes}
    </div>
  );
};

export default SpaceApp;
